<template>
  <div id="app">
    <div id="nav">
    
      <router-link to="/demo2">axios-demo2-1</router-link>
      <router-link to="/demo3">axios-demo2-2</router-link>
      <router-link to="/demo4">axios-demo3-1</router-link>
      <router-link to="/demo5">axios-demo3-2</router-link>
      <router-link to="/demo6">axios-demo3-3</router-link>
      <router-link to="/demo7">axios-demo3-4</router-link>
      <router-link to="/ContactList" class="zh">综合实例</router-link>
      <router-link to="/ContactList_http" class="zh2">综合实例(基于axios二次封装)</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px 0 ;
  border-bottom: 1px solid #ccc;
  a {
    font-weight: bold;
    color: #2c3e50;
    display: inline-block;
    margin: 4px 0;
    width: 50%;
    &.router-link-exact-active {
      color: #42b983;
    }
    &.zh2{
  width: 100%;
  display: block;
}
  }
}
.zh{
  margin-top: 20px;
}

</style>
